import { useEffect } from 'react';

/**
 * 全局变量监听组件
 * @param {Object} props
 * @param {string} props.varName - 要监听的全局变量名
 * @param {Function} props.onChange - 变量变化时的回调函数
 * @param {boolean} props.immediate - 是否在组件挂载时立即执行一次回调
 * @param {Array} props.dependencies - 额外的依赖项数组
 * @returns {null}
 */
const GlobalVarListener = ({ varName, onChange, immediate = false, dependencies = [] }) => {
  useEffect(() => {
    // 全局变量变化事件处理函数
    function onGlobalVarChange(e) {
      // 如果没有指定变量名，监听所有变化
      if (!varName) {
        onChange(e.detail);
        return;
      }
      
      // 如果指定了变量名，只在该变量变化时触发
      if (e.detail && e.detail.key === varName) {
        onChange(e.detail.value, e.detail.key);
      }
    }

    // 添加事件监听
    window.addEventListener("MY_GLOBAL_VAR_CHANGE", onGlobalVarChange);
    
    // 如果设置了immediate，立即执行一次回调
    if (immediate && varName) {
      const currentValue = window.getMyGlobalVar(varName);
      onChange(currentValue, varName);
    }

    // 清理函数
    return () => window.removeEventListener("MY_GLOBAL_VAR_CHANGE", onGlobalVarChange);
  }, [varName, onChange, immediate, ...dependencies]);

  return null;
};

export default GlobalVarListener;